@mixin imgs {
    width: 100%;
    position: absolute;
    top: -999px;
    right: -999px;
    left: -999px;
    bottom: -999px;
    margin: auto;
}

@mixin danh {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin duoh {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@mixin sanh {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@mixin tstn {
    -webkit-transition: all 1s;
    -ms-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}

.web {
    width: 100%;
    //  overflow: hidden;
}

.container-fluid {
    padding: 0;
    margin: 0;
    .navbar-brand {
        padding-top: 7px;
    }
    header {
        width: 100%;
        background: #2b80d9;
        .header {
            width: 67.5%;
            margin: 0 auto;
            margin-top: 50px;
            .row {
                padding: 0;
                margin: 0;
                .caption {
                    width: 100%;
                    padding-top: 45.625%;
                    height: 0;
                    position: relative;
                    overflow: hidden;
                    cursor: pointer; 
                    &:hover img{
                        opacity: .8;
                    }
                    img {
                        @include tstn;
                        @include imgs;
                    }
                }
            }
        }
    }
    .LayaFlash {
        width: 100%;
        background-color: #fbfaf7;
        padding-bottom: 40px;
        border-bottom: 1px solid #eaeaee;
        .LayaFlash_box {
            width: 76%;
            margin: 0 auto;
            font-size: 0;
            padding-top: 100px;
            overflow: hidden;
            .LayaFlash_left {
                display: inline-block;
                vertical-align: top;
                .engine {
                    h2 {
                        font-size: 48px;
                        color: #0078d7;
                        margin: 0;
                        padding: 0;
                        margin-bottom: 30px;
                        font-weight: bold;
                        letter-spacing: 4px;
                        @include danh;
                    }
                    p {
                        font-size: 30px;
                        color: #666;
                        margin-bottom: 50px;
                        letter-spacing: 4px;
                        @include danh;
                    }
                }
                .LayaFlash_left_nr {
                    ul {
                        margin-bottom: 30px;
                        li {
                            font-size: 16px;
                            &:nth-child(1) {
                                width: 65px;
                                height: 65px;
                                background: #0078d7;
                                border-radius: 4px;
                                position: relative;
                                overflow: hidden;
                                cursor: pointer;
                                @include tstn;
                                img {
                                    @include imgs;
                                }
                            }
                            &:nth-child(1):hover {
                                background: #222222;
                                transform: rotate(1turn);
                            }
                            &:nth-child(2) {
                                h4 {
                                    margin: 0;
                                    font-size: 19px;
                                    color: #333;
                                    @include danh;
                                    letter-spacing: 4px;
                                }
                                p {
                                    font-size: 14px;
                                    color: #666;
                                    @include duoh;
                                    margin-top: 12px;
                                    line-height: 26px;
                                    letter-spacing: 2px;
                                }
                            }
                        }
                    }
                }
            }
            .LayaFlash_right {
                display: inline-block;
                font-size: 16px;
                vertical-align: top;
                position: relative;
                .LayaFlash_right_img {
                    position: relative;
                    padding-top: 134.2939481268012%;
                    overflow: hidden;
                    cursor: pointer;
                    img {
                        @include tstn;
                        @include imgs;
                    }
                    &:hover img {
                        transform: translateX(-20px);
                    }
                }
            }
        }
    }
    .Layabox_ys {
        width: 76%;
        margin: 0 auto;
        padding: 90px 0 90px 0;
        .Layabox_ys_box {
            width: 100%;
            .Layabox_ys_box_nr {
                width: 100%;
                .Layabox_ys_box_nr_left {
                    padding-top: 25.67796610169492%;
                    position: relative;
                    overflow: hidden;
                    margin-top: 120px;
                    cursor: pointer;
                    img {
                        @include tstn;
                        @include imgs;
                    }
                    &:hover img {
                        transform: translateX(20px);
                    }
                }
                .Layabox_ys_box_nr_right {
                    h2 {
                        font-size: 48px;
                        color: #8fc31f;
                        margin-bottom: 40px;
                        font-weight: bold;
                        letter-spacing: 4px;
                        @include danh;
                    }
                    ul {
                        li {
                            line-height: 55px;
                            font-size: 14px;
                            color: #666;
                            margin: 0 0 20px 15px;
                            letter-spacing: 2px;
                            @include danh;
                            div {
                                display: inline-block;
                                width: 55px;
                                height: 55px;
                                margin-right: 12px;
                                border-radius: 100%;
                                vertical-align: top;
                                background: #8fc31f;
                                position: relative;
                                overflow: hidden;
                                cursor: pointer;
                                img {
                                    @include tstn;
                                    @include imgs;
                                }
                                &:hover img {
                                    transform: rotate(1turn);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .ProductFamily {
        width: 100%;
        background: #0079d7;
        padding: 80px 0 20px 0;
        .ProductFamily_box {
            width: 76%;
            margin: 0 auto;
            .ProductFamily_title {
                font-size: 48px;
                color: #fffefe;
                text-align: center;
                letter-spacing: 4px;
            }
            .ProductFamily_nr {
                margin-top: 50px;
                .ProductFamily_nr_box {
                    margin-bottom: 72px;
                    .ProductFamily_nr_left {
                        width: 68px;
                        height: 66px;
                        border-radius: 4px;
                        position: relative;
                        overflow: hidden;
                        cursor: pointer;
                        &:hover img {
                            transform: scale(.8);
                        }
                        img {
                            @include tstn;
                            @include imgs;
                        }
                    }
                    .ProductFamily_nr_right {
                        .ProductFamily_nr_right_title {
                            font-size: 33px;
                            color: #fffefe;
                            margin: 0;
                            line-height: 26px;
                            padding-bottom: 16px;
                            letter-spacing: 4px;
                            @include danh;
                        }
                        .ProductFamily_nr_right_nr {
                            font-size: 14px;
                            color: #fffefe;
                            line-height: 30px;
                            @include sanh;
                            letter-spacing: 2px;
                        }
                    }
                }
            }
        }
    }
    .WonderfulGame {
        width: 100%;
        .WonderfulGame_box {
            width: 76%;
            margin: 0 auto;
            margin: 68px auto 40px auto;
            .WonderfulGame_box_title {
                margin-bottom: 36px;
                letter-spacing: 4px;
                span {
                    padding-right: 6px;
                    font-size: 14px;
                    color: #2a2a2a;
                    line-height: 63px;
                }
            }
            .WonderfulGame_box_left {
                margin-left: 18px;
                .WonderfulGame_box_left_img {
                    overflow: hidden;
                    border-radius: 4px;
                    position: relative;
                    padding-top: 54%;
                    img {
                        @include imgs;
                    }
                }
            }
            .WonderfulGame_box_right {
                float: left;
                margin-left: 22px;
                .WonderfulGame_box_right_box {
                    width: 12%;
                    overflow: hidden;
                    float: left;
                    margin: 4px 16px 4px 0px;
                    div {
                        width: 100%;
                        padding-top: 100%;
                        position: relative;
                        overflow: hidden;
                        border-radius: 8px;
                        cursor: pointer;
                        img {
                            @include tstn;
                            @include imgs;
                        }
                        &:hover img {
                            transform: scale(1.2);
                        }
                    }
                    p {
                        line-height: 26px;
                        display: block;
                        font-size: 14px;
                        color: #2a2a2a;
                        text-align: center;
                    }
                }
            }
        }
    }
    .partners {
        width: 100%;
        background: #f4f4f4;
        padding: 38px 0 20px 0;
        .partners_box {
            width: 76%;
            margin: 0 auto;
            padding-left: 15px;
            .partners_box_title {
                font-size: 30px;
                color: #2a2a2a;
                padding-left: 0;
                margin-bottom: 30px;
                letter-spacing: 4px;
                span {
                    font-size: 12px;
                    color: #777;
                }
            }
            .partners_box_nr {
                width: 100%;
                div {
                    width: 13.15789473684211%;
                    padding-top: 5.614035087719298%;
                    position: relative;
                    overflow: hidden;
                    margin: 0 26px 22px 0;
                    border: 1px solid #ddd;
                    cursor: pointer;
                    @include tstn;
                    img {
                        @include imgs;
                    }
                }
                div:hover {
                    transform: translateY(-10px);
                    box-shadow: 1px 1px 20px #000000;
                }
            }
        }
    }
    .footer {
        width: 100%;
        background: #3b3b3b;
        .footer_box {
            width: 76%;
            height: 114px;
            margin: 0 auto;
            .footer_box_left {
                font-size: 12px;
                color: #a1a3ab;
                ul {
                    li {
                        font-size: 14px;
                        float: left;
                        margin: 30px 15px 0 0;
                        letter-spacing: 4px;
                    }
                }
                p {
                    @include danh;
                }
            }
            .footer_box_right {
                background: #3b3b3b;
                .footer_box_right_neir {
                    position: relative;
                    div {
                        width: 40px;
                        height: 40px;
                        float: left;
                        margin-right: 20px;
                        position: relative;
                        overflow: hidden;
                        margin-top: 37px;
                        cursor: pointer;
                        img {
                            @include tstn;
                            @include imgs;
                        }
                        &:hover img {
                            transform: scale(1.2);
                        }
                        &:nth-child(3) {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 1200px) {
    .container-fluid .WonderfulGame .WonderfulGame_box .WonderfulGame_box_left {
        margin-top: 16px;
    }
    .container-fluid .WonderfulGame .WonderfulGame_box .WonderfulGame_box_right .WonderfulGame_box_right_box {
        margin-right: 10px;
    }
}

@media only screen and (max-width: 991px) {
    .container-fluid .LayaFlash .LayaFlash_box .LayaFlash_right {
        margin-top: 200px;
    }
}

@media only screen and (max-width: 768px) {
    .container-fluid .LayaFlash .LayaFlash_box .LayaFlash_right {
        display: none;
    }
    .container-fluid .Layabox_ys .Layabox_ys_box .Layabox_ys_box_nr .Layabox_ys_box_nr_left {
        float: none;
    }
    .container-fluid .Layabox_ys {
        padding-top: 0;
    }
    .container-fluid .Layabox_ys .Layabox_ys_box .Layabox_ys_box_nr .Layabox_ys_box_nr_left {
        margin-top: 30px;
    }
    .container-fluid .Layabox_ys .Layabox_ys_box .Layabox_ys_box_nr .Layabox_ys_box_nr_left {
        padding-top: 70%;
    }
    .container-fluid .ProductFamily .ProductFamily_box .ProductFamily_nr .ProductFamily_nr_box .ProductFamily_nr_left {
        margin: 0 auto;
        float: none;
    }
    .container-fluid .WonderfulGame .WonderfulGame_box .WonderfulGame_box_title {
        margin-bottom: 0;
    }
    .container-fluid .WonderfulGame .WonderfulGame_box .WonderfulGame_box_left {
        .WonderfulGame_box_left_img {
            width: 50%;
            margin: 0 auto;
            padding-top: 26%;
        }
    }
    .container-fluid .WonderfulGame .WonderfulGame_box .WonderfulGame_box_right .WonderfulGame_box_right_box {
        padding-top: 30px;
        margin: 10px 10px;
    }
    .container-fluid .footer .footer_box {
        width: 100%;
        overflow: hidden;
        height: auto;
        padding: 15px;
    }
    .container-fluid .footer .footer_box .footer_box_left ul li {
        margin: 0;
        font-size: 12px;
    }
    .container-fluid .footer .footer_box .footer_box_right .footer_box_right_neir div {
        width: 20px;
        height: 20px;
        margin-top: 0;
    }
    .container-fluid .WonderfulGame .WonderfulGame_box .WonderfulGame_box_right .WonderfulGame_box_right_box {
        padding-top: 0;
        margin: 0 20px 0 0;
    }
    .container-fluid .LayaFlash .LayaFlash_box {
        padding-top: 20px;
    }
    .container-fluid .LayaFlash .LayaFlash_box .LayaFlash_left .engine h2 {
        margin-bottom: 10px;
    }
    .container-fluid .LayaFlash .LayaFlash_box .LayaFlash_left .engine p {
        margin-bottom: 10px;
    }
    .container-fluid .WonderfulGame .WonderfulGame_box .WonderfulGame_box_title span {
        display: none;
    }
    .container-fluid .WonderfulGame .WonderfulGame_box .WonderfulGame_box_left {
        display: none;
    }
    .container-fluid .WonderfulGame .WonderfulGame_box .WonderfulGame_box_right {
        margin-left: 0;
        margin-top: 10px;
    }
    .container-fluid .WonderfulGame .WonderfulGame_box {
        margin-top: 10px;
    }
    .container-fluid .ProductFamily .ProductFamily_box .ProductFamily_nr .ProductFamily_nr_box{
        margin-bottom: 40px;
    }
    .container-fluid .ProductFamily .ProductFamily_box .ProductFamily_nr .ProductFamily_nr_box .ProductFamily_nr_left{
        position: relative;
        top:-20px
    }
}